<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-link-active{
            background: red;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>开始学习路由啦</h1>
        以下是新闻列表
       <!--  <router-link to="/newsDetail/1" tag="button">去新闻页1</router-link>
        <router-link to="/newsDetail/2" tag="button">去新闻页2</router-link>
        <router-link to="/newsDetail/3" tag="button">去新闻页3</router-link>
        <router-link to="/newsDetail/4" tag="button">去新闻页4</router-link>
        <router-link to="/newsDetail/5" tag="button">去新闻页5</router-link>
        <router-link to="/newsDetail/6" tag="button">去新闻页6</router-link> -->
        以下是新闻列表
        <router-link :to="`/newsDetail/1/a/b/${new Date().getTime()}`" tag="button">去新闻页1</router-link>
        <router-link :to="`/newsDetail/2/a/b/${new Date().getTime()}`" tag="button">去新闻页2</router-link>
        <router-link :to="`/newsDetail/3/a/b/${new Date().getTime()}`" tag="button">去新闻页3</router-link>
        <router-link :to="`/newsDetail/4/a/b/${new Date().getTime()}`" tag="button">去新闻页4</router-link>
        <router-link :to="`/newsDetail/5/a/b/${new Date().getTime()}`" tag="button">去新闻页5</router-link>
        <router-link :to="`/newsDetail/6/a/b/${new Date().getTime()}`" tag="button">去新闻页6</router-link>
        <hr>
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>

        let News = {
            template:`
                <h1> news组件 </h1>
            `
        }
        let NewsDetail = {
            template:`
                <h1> 我是新闻详情页 {{ $route.params.id }} id2=> {{$route.params.id2}} </h1>
            `,
            mounted(){
                console.log(this.$route)
            },
            watch:{
                '$route'(to,from){
                    console.log(to);
                    console.log(from)
                }
            }
        }
        const routes = [
            {
                path:"/news",
                component:News
            },
            /* {
                path:"/newsDetail/:id",
                component:NewsDetail
            } */
            {
                path:"/newsDetail/:id/a/b/:id2",
                component:NewsDetail
            }
        ];
        const router = new VueRouter({
            routes
        });
        let vm = new Vue({
            el:"#app",
            router
        })
        /* 
         hash 模式
         根据 url hash值得变化 来 匹配不同的组件
         window.onhashchange
         

         $router对象
         $route
         */
    </script>
</body>
</html>